<template>
  <div style="text-align: left">
    <h3>uplaod上传图片加水印</h3>

    <el-upload
      action="/api/upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="successHandle"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

    <canvas height="200" id="myCanvas" width="200"> </canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    successHandle(file) {

        var imgUrl = ""
      this.getWaterImg(imgUrl);
      //this.drawPhoto(imgUrl,1)
    },

    getWaterImg(imgUrl) {
      var dataURL = "";
      var img = new Image();
       img.crossOrigin = 'anonymous';
        // img.setAttribute("crossOrigin", "anonymous"); //设置图片可跨域
      img.src = imgUrl
      console.log(img)
      img.onload = () => {
        // 准备canvas环境
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        // 先把图片绘制到canvas上
        ctx.drawImage(img, 0, 0, 150, 150);
        //字体大小
        ctx.font = "12px";
        //字体填充颜色
        ctx.fillStyle = "red";
        ctx.rotate((20 * Math.PI) / 180);
        //   ctx.rotate(45*Math.PI/180);
        //字体文字，显示位置
        ctx.fillText("仅限该平台使用", 75, 75);
        dataURL = canvas.toDataURL('image/png')
      }
    },

        drawPhoto (src, type) {
      let canvas = document.getElementById("myCanvas");
      var width = document.documentElement.clientWidth
      var height = document.documentElement.clientHeight
      let context = canvas.getContext('2d')
        var test = ""
      canvas.width = 130
      canvas.height = 97
      let img = new Image()
        img.crossOrigin = 'anonymous';
      img.src = src 
      var ox = canvas.width / 2
      var oy = canvas.height / 2
      img.onload = () => {
        context.drawImage(img, 0, 0, 130, 97)
        context.font = '12px Arial'
        // 字体填充颜色
        context.fillStyle = 'red'
        // 字体文字，显示位置
        context.translate(ox, oy) // 将画布的原点移动到正中央
        context.rotate((Math.PI / 180) * 45) // 弧度 = (Math.PI/180)*角度
        context.fillText('仅用于实名认证', -40, -10)
        context.translate(-ox, -oy) // 将画布的原点还原
       
        // test = canvas.toDataURL('image/png')
        // console.log(test)
        // if (type === 1) {
        //   this.fileList1 = [{
        //     uid: -3,
        //     name: 'image.png',
        //     status: 'done',
        //     url: canvas.toDataURL('image/png'),
        //   }]
        //   this.base64ToUrl(canvas.toDataURL('image/png').split(',')[1], 'frontImage')
        // } else {
        //   this.fileList2 = [{
        //     uid: -1,
        //     name: 'image.png',
        //     status: 'done',
        //     url: canvas.toDataURL('image/png'),
        //   }]
        //   this.base64ToUrl(canvas.toDataURL('image/png').split(',')[1], 'backImage')
        // }
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
</style>
